import React, {
  useState,
  useRef,
  useEffect,
  memo,
  useLayoutEffect,
} from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import moment from 'moment';
import {
  useIntl,
  Link,
  history,
  FormattedMessage,
  SelectLang,
  useModel,
} from 'umi';
import { Card, Alert, Typography, Button,Switch, Input ,Table} from 'antd';
import { connect } from 'dva';
import styles from './index.less'


class DataCollection extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      speedDatas:[],
      positionDatas:[],
      count:0,
      checkState:true,
      vehicleInfo:'',
      vehicleId:this.props.match.params.vehicleId,
    }
    this.onChange = this.onChange.bind(this)
    this.changeTime = this.changeTime.bind(this)
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'dataCollection/fetchOne',
      payload: this.props.match.params,
    })
    dispatch({
      type: 'dataCollection/reqGetStatusDataRead',
      payload: this.props.match.params
    })
    dispatch({
      type: 'dataCollection/reqGetRealSpeed',
      payload: this.props.match.params
    })
    dispatch({
      type: 'dataCollection/reqGetLatestPosition',
      payload: this.props.match.params
    })
    this.setState({speedDatas:[...this.state.speedDatas,this.props.dataCollection.speedData]})
    this.setState({positionDatas:[...this.state.speedDatas,this.props.dataCollection.postionData]})
    const mydatas = setInterval(() => {
      dispatch({
        type: 'dataCollection/reqGetRealSpeed',
        payload: this.props.match.params
      })
      dispatch({
        type: 'dataCollection/reqGetLatestPosition',
        payload: this.props.match.params
      })
      if(this.state.count > 4 || this.state.checkState === false){
        console.log(this.state.checkState)
        clearInterval(mydatas);
      }
      this.setState({vehicleInfo:this.props.dataCollection.vehicleInfo[0].licensePlateNumber})
    }, 3000);
    const myData = setInterval(() => {
      console.log('adaa')
      this.setState({speedDatas:[...this.state.speedDatas,this.props.dataCollection.speedData]})
      this.setState({positionDatas:[...this.state.positionDatas,this.props.dataCollection.postionData]})
      this.setState({count:this.state.count+1})
      console.log('21312312')
      console.log(this.state.positionDatas)
      console.log('21312312')
      if(this.state.count > 4 || this.state.checkState === false){
        console.log(this.state.checkState)
        clearInterval(myData);
      }
    }, 3500);

  }
  onChange(checked) {
    console.log(`switch to ${checked}`);
    const id = this.props.match.params.vehicleId
    const paramsss = {vehicleIdList:[id]}
    if(checked === true){
      this.props.dispatch({
        type: 'dataCollection/reqOpenOrRealDataRead',
        payload:paramsss
      })
    }else{
      this.setState({checkState:false})
    }
  
  }
  changeTime(value){
    return moment(value).format('YYYY-MM-DD h:mm:ss')
  }
  render() {
    // const licensePlateNumber = this.props.dataCollection.vehicleInfo[0].licensePlateNumber
    // console.log(this.props);
    console.log(this.props.dataCollection);
    const columns1 = [
      {
        title: '位置ID',
        dataIndex: 'positionId',
        key: 'positionId',
      },
      {
        title: '车辆ID',
        dataIndex: 'vehicleId',
        key: 'vehicleId',
      },
      {
        title: '经度',
        dataIndex: 'longitude',
        key: 'longitude',
      },
      {
        title: '纬度',
        dataIndex: 'latitude',
        key: 'latitude',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
      },
    ];
    const columns2 = [
      {
        title: '发动机转速',
        dataIndex: 'engineSpeed',
        key: 'engineSpeed',
      },
      {
        title: '燃油量',
        dataIndex: 'fuelMargin',
        key: 'fuelMargin',
      },
      {
        title: '发动机温度',
        dataIndex: 'engineTemperature',
        key: 'engineTemperature',
      },
      {
        title: '速度',
        dataIndex: 'speed',
        key: 'speed',
      },
      {
        title: '倾斜度',
        dataIndex: 'inclination',
        key: 'inclination',
      },
    ];
    const dataSource2 = [...this.state.speedDatas];
    const dataSource1 = [...this.state.positionDatas];
    return (
      <PageContainer
        header={{
          title:'车牌号',
          breadcrumb: {
            routes: [
              {
                path: '/vehicle',
                breadcrumbName: '车辆信息',
              },
              {
                path: '/vehicle/:vehicleId',
                breadcrumbName: '详细信息'
              }
            ],
          },
        }}
      >
        <div className={styles.cars}>车牌号：{this.state.vehicleInfo}</div>
        <div className={styles.buttonStyle}>查看车辆历史位置及油耗信息：<Button type="primary"><Link to={"/vehicle/" + this.state.vehicleId+"/forCars"}>前往</Link></Button></div>
        开启或者关闭实时数据<Switch className={styles.switch} defaultChecked onChange={this.onChange} />
        <Table dataSource={dataSource1} columns={columns1} />;
        <Table dataSource={dataSource2} columns={columns2} />;
      </PageContainer>
    )
  }
}

export default connect(({ dataCollection }) => ({ dataCollection }))(
  DataCollection,
);
